<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>占卜规则</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/vue-infinite-scroll.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard syntax */
  }

  ul {
    list-style: none;
  }

  .infinite-list-wrapper {
    overflow-y: auto;
    height: 100vh;
    font-size: 14px;
    color: #fff;
  }
  p {
    margin: 10px 0;
    line-height: 1.4;
  }
  .img-box {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    background: url(/mobile/img/border.png) no-repeat;
    background-size: cover;
    vertical-align: middle;
  }
  .img{
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-15px, -15px);
  }
  .shell {
    width: 14px;
    height: 14px;
    vertical-align: middle;
  }
  .type {
    width: 20px;
    position: absolute;
    left: 1px;
    top: 1px;
  }
  .name {
    font-weight: bold;
    color: #FA6478;
  }

  </style>
</head>

<body>
  <div id="app">
    <div class="infinite-list-wrapper">
      <p>1.魔法水晶球活动限时开放期间，用户可通过购买限定道具获得占卜机会，本次开放期间每购买<span class="name">{{name}}</span>
      <span class="img-box"><img class="img" :src="url" alt=""><img class="type" :src="giftTypeMap[giftType]" alt=""></span>({{price}}<img class="shell" src="/mobile/img/recharge-shell.png" alt="">/天)可赠送一次占卜机会，每次占卜百分百获得道具，可占卜获得的道具包括但不仅限于礼物池内容，礼物池仅提供部分道具的展示。占卜后礼物可以在背包中查看、赠送。</p>
      <p>2.此活动是提升用户互动的功能，仅供娱乐交流使用，平台严厉打击以盈利为目的的礼物交易行为，用户占卜获得的礼物不得线上、线下交易或反向兑换成现金或有价值的商品，只能在平台互动消耗使用。</p>
      <p>3.利用程序漏洞等非正常手段获取礼物以及违反上述第2条规则的用户，贝贝语音有权没收该用户在平台的所有资产并封禁账号。</p>
      <p>4.此活动与苹果公司无关。</p>
      <p>5.对此活动，贝贝语音保留最终解释权。</p>
    </div>
  </div>
  <script>
  var count = 0;

  new Vue({
    el: '#app',
    data: {
      type: null,
      giftId: '',
      giftType: '',
      name: '',
      price: '',
      url: '',
      giftTypeMap: {
        1: '/mobile/img/txk.png',
        2: '/mobile/img/zq.png',
        3: '/mobile/img/lw.png',
      }
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      var data = parse(location.search)
      console.log(data)
      if (data.type && data.token) {
        this.type = Number(data.type)
        this.token = data.token
        this.getData()
      }
    },
    methods: {
      getData() {
        var query = `extractType=${this.type}`
        var str = ISCRYPT ? `args=${encrypt(query)}` : query
        request.get(`/api/business/app/extractParameter/getExtractPriceInfo3?${str}`).then(res => {
          console.log(res)
          if (res.data) {
            this.giftId = res.data.giftId
            this.giftType = res.data.giftType
            this.name = res.data.name
            this.price = res.data.price
            this.url = res.data.url
          }
        })
      },
    }
  })
  </script>
</body>

</html>